<template>
<view class="page">
	<view class="body"> 
		<template v-if="page==1">
			<view class="top"> 
				<view> </view>
				<view class="add-btn iconfont" @click="showPopup('show','isAdd');type='add';">&#xe644;</view>
			</view>
			<template v-if="list.length>0">
				<view class="list-wrap">
					<view class="item m-b2" v-for="(item,index) in list" :key="index">					
						<navigator :url="'/pages/community-list/community-list?name='+item.name+'&page=2&garden_id='+item.id" hover-class="none" class="title-bar">
							<view class="title">{{item.name}}</view>
							<view class="info">
								<text>0个菜园</text>
								<text>0个设备</text>
							</view>
						</navigator> 
						<view class="right-btn">
							<view class="iconfont m-r2 f-s44" @click="edit(index);type='edit';">&#xe601;</view>
							<view class="iconfont f-s44" @click="del(item.id)">&#xe8b6;</view>
							<!-- <view class="iconfont">&#xe623;</view> -->
						</view>
					</view>
					<!-- <c-loading :loadingState="loadingState"></c-loading> -->
				</view>  
			</template>	
			<c-empty v-else msg="暂无数据"></c-empty>
		</template>
		<template v-if="page==2">
			<view class="top">
				<view><text v-if="page==2" class="f-wb">{{page_name}}</text></view>
				<view class="add-btn iconfont" @click="showPopup('show','isAdd');type='add';">&#xe644;</view>
			</view>
			<template v-if="list.length>0">
				<view class="list-wrap">
					<view class="item m-b2" v-for="(item,index) in list" :key="index">					
						<navigator :url="'/pages/community-list/community-list?name='+item.name+'&page=3&garden_id='+garden_id+'&area_id='+item.id" hover-class="none" class="title-bar">
							<view class="title">{{item.name}}</view>
							<view class="info">
								<text>0个作物</text> 
							</view>
						</navigator> 
						<view class="right-btn">
							<view class="iconfont m-r2 f-s44" @click="edit(index);type='edit';">&#xe601;</view>
							<view class="iconfont f-s44" @click="del(item.id)">&#xe8b6;</view>
							<!-- <view class="iconfont">&#xe623;</view> -->
						</view>
					</view>
					<!-- <c-loading :loadingState="loadingState"></c-loading> -->
				</view>  
			</template>	
			<c-empty v-else msg="暂无数据"></c-empty>
		</template>
		<template v-if="page==3">
			<view class="top">
				<view><text class="f-wb">{{page_name}}</text></view>
				<view class="add-btn iconfont" @click="showPopup('show','isAdd');type='add';">&#xe644;</view>
			</view>
			<template v-if="list.length>0">
				<view class="list-wrap">
					<view class="item m-b2" v-for="(item,index) in list" :key="index">					
						<navigator :url="'/pages/community-list/community-list?name='+item.name+'&page=2&id='+item.id" hover-class="none" class="title-bar">
							<view class="title">{{item.name}}</view>
							<view class="info">
								<!-- <text>0个作物</text> -->
							</view>
						</navigator> 
						<view class="right-btn">
							<view class="iconfont m-r2 f-s44" @click="edit(index);type='edit';">&#xe601;</view>
							<view class="iconfont f-s44" @click="del(item.id)">&#xe8b6;</view>
							<!-- <view class="iconfont">&#xe623;</view> -->
						</view>
					</view>
					<!-- <c-loading :loadingState="loadingState"></c-loading> -->
				</view>  
			</template>
				<c-empty v-else msg="暂无数据"></c-empty>
		</template>
		
		
		
	</view>	
	 
	<view v-if="flag.isFullPage" class="full-fix-page">
		<view  class="modal-center">
			<view class="modal-wrap">
				<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xe603;</view>
				<view class="title">{{page==1?'添加菜园':'添加区域'}}</view>
				<view class="modal-form">
					<view class="item">
						<view class="get-phone-code-bar"> 
							<view class="code-inp">
								<input type="number" v-model="name" class="inp" :placeholder="page==1?'输入菜园名称':'输入区域名称'"> 
							</view> 
						</view>  
					</view>		 
				</view>
				<view class="modal-form-btn-wrap"> 
					<view class="form-btn confirm" @click="gardenadd">确 定</view>
				</view>
			</view>
		</view> 
	</view>
	
</view>
</template>

<script>  
export default{
	name:'demo',
	data(){
		return{ 
			title:'',
			page:'',
			id:'',
			area_id:'',
			garden_id:'',
			isLogin:false,
			loadingState:{
				default:false,
				loading:true,
				completed:false
			},
			flag:{
				isFullPage:false, 
				isAdd:false
			},
			type:'',   
			total:0,
			list:[], 
			name:'',
			currentCy:{},
			page_name:''
			
		}
	},
	async onShow() {
		
	},
	async onLoad(params) {
		this.page=params.page;		
		
		
		if(this.page==1){
			this.gardenindex();
			this.title='菜园管理';
		}
		if(this.page==2){
			this.garden_id=params.garden_id; 
			this.page_name=params.name;
			this.title='区域管理';
			this.areaindex()
		}
		if(this.page==3){
			this.garden_id=params.garden_id;
			this.area_id=params.area_id;
			this.page_name=params.name;
			this.title='花盆管理'; 
			this.potindex();
		}
		uni.setNavigationBarTitle({
			title:this.title
		})
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++; 
			} 
		}	 
	},
	methods:{
		// 获取列表
		async gardenindex(){
			let res=await this.$api.user_api.gardenindex();  
			if(res.data.code==0 && res.data.data.length>0){
				this.list=res.data.data;    
			} 			 
		},
		
		async areaindex(){
			let res=await this.$api.user_api.areaindex({
				garden_id:this.garden_id
			});  
			if(res.data.code==0 && res.data.data.length>0){
				this.list=res.data.data;  
			}   
		},
		
		async potindex(){
			let res=await this.$api.user_api.potindex({
				garden_id:this.garden_id,
				unused:0
			});  
			if(res.data.code==0 && res.data.data.length>0){
				this.list=res.data.data;  
			}   
		},
		
		
		 
		async gardenadd(){
			if(this.page==1){
				if(this.type=='add'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入菜园名称'
						})
						return
					} 
					let res=await this.$api.user_api.gardenadd({
						name:this.name
					});  
					if(res.data.code==0 ){				 
						this.showPopup('hide'); 
						this.name="";
						this.$store.commit('cy_update')
					} 
				}
				if(this.type=='edit'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入菜园名称'
						})
						return
					} 
					let res=await this.$api.user_api.gardenedit({
						id:this.currentCy.id,
						name:this.name
					}) 
					if(res.data.code==0){
						this.name='';
						this.showPopup('hide');
						this.$store.commit('cy_update');
					}
				}
			}
			
			if(this.page==2){
				if(this.type=='add'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入区域名称'
						})
						return
					} 
					let res=await this.$api.user_api.areaadd({
						garden_id:this.id,
						name:this.name
					});  
					if(res.data.code==0 ){				 
						this.showPopup('hide'); 
						this.name="";
						this.$store.commit('cy_update')
					} 
				}
				if(this.type=='edit'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入区域名称'
						})
						return
					} 
					let res=await this.$api.user_api.areaedit({
						garden_id:this.id,
						id:this.currentCy.id,
						name:this.name
					}) 
					if(res.data.code==0){
						this.name='';
						this.showPopup('hide');
						this.$store.commit('cy_update');
					}
				}
			}
			
			if(this.page==3){
				if(this.type=='add'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入作物名称'
						})
						return
					} 
					let res=await this.$api.user_api.areaadd({
						garden_id:this.id,
						name:this.name
					});  
					if(res.data.code==0 ){				 
						this.showPopup('hide'); 
						this.name="";
						this.$store.commit('cy_update')
					} 
				}
				if(this.type=='edit'){
					if(this.name==''){
						uni.showToast({
							icon:'none',
							title:'请输入区域名称'
						})
						return
					} 
					let res=await this.$api.user_api.areaedit({
						garden_id:this.id,
						id:this.currentCy.id,
						name:this.name
					}) 
					if(res.data.code==0){
						this.name='';
						this.showPopup('hide');
						this.$store.commit('cy_update');
					}
				}
			}
			 
		},
		
		del(id){
			let _this=this;
			uni.showModal({
				content:"确定删除该数据吗？",
				async success(res) {
					if(res.confirm){
						if(_this.page==1){
							let d_res=await _this.$api.user_api.gardendelete({
								id:id
							}) 
							if(d_res.data.code==0){
								_this.$store.commit('cy_update');
							}
						}
						if(_this.page==2){
							let d_res=await _this.$api.user_api.areadelete({
								id:id
							}) 
							if(d_res.data.code==0){
								_this.$store.commit('cy_update');
							}
						}
					}
				}
			})
		},	
			
		async edit(idx){			 
			this.currentCy=this.list[idx];
			this.name=this.currentCy.name;
			this.showPopup('show','isAdd');
			
		},
		  
		// 打开弹窗
		showPopup(t, n) { 
			if (t == 'show') { 
				this.flag.isFullPage = true;
				this.flag[n] = true;
			} else if (t == 'hide') {
				if(n){ 
					this.flag[n] = false;
				}else{
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}					
			}
		},
	},
	computed:{
		cy_update(){
			return this.$store.state.cy_update
		} 
		
	},
	watch:{
		cy_update(n,o){
			if(n!=o){
				if(this.page==1){
					this.list=[];
					this.gardenindex();
				}
				if(this.page==2){
					this.list=[];
					this.areaindex();
				}
			}
		} 
	},
	components:{ 
	}
}
</script>

<style scoped lang="less">
	.top{
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin: 30rpx;
	}
	.add-btn{
		font-size: 58rpx;
	}
	.list-wrap{
		margin: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center; 
			background: #fff;
			border-radius: 15rpx;
			padding: 20rpx;			 
			.title-bar{  
				flex-grow: 2;
				.title{
					margin-bottom: 10rpx;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
				.info{
					text{
						margin-right: 30rpx;
						font-size: 28rpx;
						color: #999;
					} 
				}
			}			
			.right-btn{
				display: flex; 
				align-items: center; 
				color: #666;
			}
		}
	
	}
	
</style>
